<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>AdminLTE 2 | Starter</title>
  <!-- Tell the browser to be responsive to screen width -->
  <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
  <!-- Bootstrap 3.3.6 -->
  <link rel="stylesheet" href="__ADMINLTE__/bootstrap/css/bootstrap.min.css">
  <!-- Font Awesome -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.5.0/css/font-awesome.min.css">
  <!-- Ionicons -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ionicons/2.0.1/css/ionicons.min.css">
  <!-- fullCalendar 2.2.5-->
  <link rel="stylesheet" href="__ADMINLTE__/plugins/fullcalendar/fullcalendar.min.css">
  <!-- Theme style -->
  <link rel="stylesheet" href="__ADMINLTE__/dist/css/AdminLTE.min.css">
  <link rel="stylesheet" href="__ADMINLTE__/dist/css/skins/skin-blue.min.css">

  <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
  <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
  <!--[if lt IE 9]>
  <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
  <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
  <![endif]-->
</head>

<body class="hold-transition skin-blue sidebar-mini">
<div class="wrapper">

  <!-- Main Header -->
  <include file="./Public/AdminLTE/header.html" />
  <!-- Left side column. contains the logo and sidebar -->
  <include file="./Public/AdminLTE/aside.html" />

  <!-- Content Wrapper. Contains page content -->
  <div class="content-wrapper">
    <!-- Content Header (Page header) -->
		<section class="content-header">
      <h1>
        Calendar
        <small>Control panel</small>
      </h1>
      <ol class="breadcrumb">
        <li><a href="#"><i class="fa fa-dashboard"></i> Home</a></li>
        <li class="active">Calendar</li>
      </ol>
    </section>

    <!-- Main content -->
    <section class="content">
      <div class="row">
        <!-- /.col -->
        <div class="col-md-8">
          <div class="box box-primary">
          
            <div class="box-body no-padding">
              <!-- THE CALENDAR -->

              <div id="calendar"></div>
            </div>
            <!-- /.box-body -->
          </div>
          <!-- /. box -->
        </div>
        <div class="col-md-4">
          <div class="box box-primary">
            <div class="box-body">
                <div id="eventinfo"> 
                </div>
            </div>
          </div></div>
        <!-- /.col -->
      </div>
      <!-- /.row -->
    </section>
    <!-- /.content -->
  </div>
  <!-- /.content-wrapper -->
  <footer class="main-footer">
    <div class="pull-right hidden-xs">
      <b>Version</b> 2.3.3
    </div>
    <strong>Copyright &copy; 2014-2015 <a href="http://almsaeedstudio.com">Almsaeed Studio</a>.</strong> All rights
    reserved.
  </footer>

</div>


<!-- jQuery 2.2.0 -->
<script src="__ADMINLTE__/plugins/jQuery/jQuery-2.2.0.min.js"></script>
<!-- Bootstrap 3.3.6 -->
<script src="__ADMINLTE__/bootstrap/js/bootstrap.min.js"></script>
<!-- jQuery UI 1.11.4 -->
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
<!-- AdminLTE App -->
<script src="__ADMINLTE__/dist/js/app.min.js"></script>
<!-- fullCalendar 2.2.5 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.11.2/moment.min.js"></script>
<script src="__ADMINLTE__/plugins/fullcalendar/fullcalendar.min.js"></script>
<script>
  $(function () {
    var colors=['#00c0ef','#0073b7','#3c8dbc','#39cccc','#f39c12','#ff851b','#00a65a','#01ff70','#dd4b39','#605ca8','#f012be','#777'];
    var works = [];
    var preday;
    var date = new Date();
    var d = date.getDate(),
        m = date.getMonth(),
        y = date.getFullYear();

    $('#calendar').fullCalendar({
      header: {
        left: 'prev,next today',
        center: 'title',
        right: 'month,agendaWeek,agendaDay'
      },
      buttonText: {
        today: '今天',
        month: '月历',
        week: '周历',
        day: '日历'
      },
      //Random default events
      events: function(start, end, timezone, callback) {
        $.ajax({
            url: '__MODULE__/work/ajaxgetwork',
            dataType: 'json',
            success: function(doc) {
                var events = [];
                $(doc).each(function(i) {
                    events.push({
                        id: $(this).attr('id'),
                        title: $(this).attr('title'),
                        start: $(this).attr('timesta'),
                        end:$(this).attr('timeend'),
                        backgroundColor:colors[i%12],
                        borderColor:colors[i%12],
                        users:$(this).attr('users'),
                        plannerid:$(this).attr('plannerid'),
                        sta:$(this).attr('sta'),
                        remark:$(this).attr('remark')
                    });
                });
                callback(events);
            }
        });
      },
      editable: false,
      //点击某一天事件
      dayClick: function(date) {
        if (preday) {
          preday.css('background-color', '#fff');
        }
        preday = $(this);
        preday.css('background-color', '#fcf8e3');
        $("#eventinfo").empty();
        $("#eventinfo").append("<h3>"+date.format()+"</h3>");
        $.get("__MODULE__/workgroup/getgroupstas",function(data){
            for (var i = 0; i <data.length; i++) {
              $("#eventinfo").append("<p>"+data[i].name+"&nbsp;&nbsp;:&nbsp;&nbsp;"+data[i].stacount+"人空闲</p>");
            }
        });
        
      },

      //点击某一日程(事件)触发
      eventClick:function(event){
        $.get("__MODULE__/work/getworksbyid/"+event.id,function(data){
          if (data['sta']==1) {
            var title="<h3><a href=''>"+event.title+"</a>&nbsp;&nbsp;<span class='btn btn-success btn-xs'>未开始</span></h3>";
          }else if(data['sta']==2){
            var title="<h3><a href=''>"+event.title+"</a>&nbsp;&nbsp;<span class='btn btn-warning btn-xs'>工作中</span></h3>";
          }else if(data['sta']==3){
            var title="<h3><a href=''>"+event.title+"</a>&nbsp;&nbsp;<span class='btn btn-danger btn-xs'>完结</span></h3>";
          }
          var time = "<p><i class='fa fa-calendar-check-o margin-r-5'></i>"+data['timesta']+" 至 "+data['timeend']+"</p>";
          var users = "<p><i class='fa fa-users margin-r-5'></i>"+data['users']+"</p>";
          var remark = "<p>"+data['remark']+"</p>";
          var planner = "<p>"+data['plannerid']+"</p>";
          $("#eventinfo").empty();
          $("#eventinfo").append(title,time,users,remark,planner);
        });
      }
      
    });

  });
</script>
</body>
</html>
